<template>
	<div class="vux-timeline">
		<ul>
			<slot></slot>
		</ul>
	</div>
</template>

<script>
export default {
  props: {
    color: String,
    isShowIcon: {
      type: Boolean,
      default: true
    }

  },
  methods: {
    setChildProps () {
      if (!this.$children) return
      const len = this.$children.length
      this.$children.forEach((child, index) => {
        child.isLast = index === len - 1
        child.isFirst = index === 0
      })
    }
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  @theme-color: #04BE02;

.vux-timeline {
  padding: 1rem;
}

.vux-timeline > ul > li {
  list-style: none;
}

@vux-timeline: ~"vux-timeline";

.@{vux-timeline} {
  &-item {
    position:relative;
  }

  &-item-content {
    padding:0 0 1.5rem 1.2rem;
  }

  &-item-head, &-item-head-first {
    position:absolute;
    content:'';
    z-index:99;
		color:#04be02;

  }

  &-item-head {
    /*width:10px;
    height:10px;*/
		color:#bbbbbb;
		font-size:12px;
    left:1px;
		/*top:4px;*/
  }

  &-item-head-first {
    width:20px;
    height:20px;
    left:-4px;
		/*top:5px;*/
  }

  &-item-tail {
    position:absolute;
    content:'';
    height:95%;
    width:2px;
    left:5px;
    top:10px;
    background-color: @theme-color;
  }

  &-item-checked {
    width: 100%;
    position: absolute;
    left: 3px;
    top: 0;
    width: 14px;
    height: 14px;
		background: #04be02;
		border-radius:50%;
    &.weui-icon-success-no-circle::before
		{
      font-size: 10px;
      position: absolute;
      left: 2px;
      top: 2px;
      margin: 0!important;
      color: #FFF;
    }
		&.weui-icon-waiting::before {
			font-size: 10px;
			position: absolute;
			left: 2px;
			top: 2px;
			margin: 0!important;
			color: #FFF;
		}
  }
}
/*
.vux-timeline-item-color {
	background-color: @timeline-item-bg-color;
}*/
</style>
